<template>
  <div>
    <div class="app-container">
      <el-form label-width="80px" inline>
        <el-form-item label="点位搜索:">
          <el-input palceholder="请输入" />
        </el-form-item>
        <el-form-item label="区域搜索:">
          <el-input palceholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"><i class="el-icon-search" />查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-card shadow="always">
        <el-button type="primary" class="config1" icon="el-icon-plus" @click="addP">新建</el-button>
      </el-card>
      <el-table style="width: 100%" :data="list">
        <el-table-column
          label="序号"
          type="index"
        />
        <el-table-column
          prop="name"
          label="点位名称"
        />
        <el-table-column
          prop="region.name"
          label="所在区域"
        />
        <el-table-column
          prop="businessType.name"
          label="商圈类型"
        />
        <el-table-column
          prop="ownerName"
          label="合作商"
        />
        <el-table-column
          prop="name"
          label="详细地址"
        />
        <el-table-column
          label="操作"
        >
          <template #default="{row}">
            <el-button type="text" @click="update">查看详情</el-button>
            <el-button type="text" @click="edit">修改</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
        <div class="page">
          <div class="left">
            <span>共{{ params.totalCount }}条记录</span>
            <span>第 {{ params.pageIndex }}/{{ params.totalPage }}页</span>
          </div>
          <div class="right">
            <el-button-group>
              <el-button
                type="primary"
                :disabled="params.pageIndex<=1?true:false"
                @click="getSearchList(-1)"
              >上一页</el-button>
              <el-button type="primary" @click="getSearchList(1)">下一页</el-button>
            </el-button-group>
          </div>
        </div>
      </el-table>
      <addPoint ref="addPoint" />
      <updatePoint ref="updatePoint" />
      <editPoint ref="editPoint" />
    </div>
  </div>
</template>

<script>
import { getNodelist, getSearchList, deleteNodeList } from '@/api/point'
import addPoint from './components/add.vue'
import updatePoint from './components/update.vue'
import editPoint from './components/edit.vue'
export default {
  name: 'PointManagement',
  components: {
    addPoint,
    updatePoint,
    editPoint
  },
  data() {
    return {
      list: [],
      params: {
        pageIndex: 0,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      }
    }
  },

  mounted() {
    this.getNode()
  },

  methods: {
    // 分页
    async getSearchList(num = 0) {
      this.params.pageIndex = +this.params.pageIndex + num
      const res = await getSearchList(this.params)
      console.log(res, 'res的结果是什么')
      this.params.pageIndex = res.pageIndex
      this.params.totalPage = res.totalPage
      console.log(res.currentPageRecords)
      this.list = res.currentPageRecords
      this.list.forEach(ele => {
        ele.method = '手动'
      })
      this.params.totalCount = parseInt(res.totalCount)
      console.log(this.list, '真个页面结果是什么')
    },
    async getNode() {
      const res = await getNodelist()
      // console.log(res.currentPageRecords)
      this.list = res.currentPageRecords
    },
    addP() {
      this.$refs.addPoint.visible = true
    },
    update() {
      this.$refs.updatePoint.visible = true
    },
    async del(id) {
      await this.$confirm('确定删除吗', 'tips', {
        type: 'warning'
      })
      await deleteNodeList(id)
      this.$message.success('成功')
      this.getNode()
    },
    edit(row) {
      this.$refs.editPoint.form = { ...row }
      this.$refs.editPoint.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form{
  // width: 1159px;
  height: 64px;
  padding-top: 14px;
  background-color: #fff;
  border:none
}
.el-icon-search{
  margin-right: 7px;
}
.page{
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-right: 5px;
    }
  }
  .right{
    margin-left: 750px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }

  }
}
.config1{
  background-color: #ff893b;
  color:#fff;
  border:none;
  cursor: pointer;
}
</style>
